<script>
export default {
  name: "GoodsComponent",
  created() {
    // 初始化数据
    this.initData();
  //   组件挂载后直接获得第一页数据
    this.fetchData();
  },
  data() {
    return {
      //   上方状态栏
      radio1: '全部商品',
      // 搜索按钮
      radio2: '搜索按',
      //   表格中显示数据
      tableData: [],
      //   搜索框中绑定数据
      searchData: {
        pageNum: '1',
        pageSize: '10',
        goodsName: '',
        goodStatus: '',
        shopName: '',
        startTime: '',
        endTime: '',
      },
//   表单中所有方法参数
      form: {
        goodsName: '',
        shopName: '',
        timeStartAndEnd: {
            startTime: '',
            endTime: '',
            goodsId:'',
            goodsStatus:'',
            pageNum:'1',
            pageSize:'',
        }
      },
      row:{},
    }
  },
  methods: {
    //   搜索按钮
    getSearch() {
      // const baseUrl = 'http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList';
      const baseUrl = 'http://localhost:8080/panghudaojiaBackend/goods/querySearchShopGoodsList';
      const queryParams = new URLSearchParams({
        pageNum: 1,
        pageSize: 10,
        goodsName: this.form.goodsName || '',
        goodsStatus: '', // 注意：这里你使用的是 'goodStatus'，但之前使用的是 'goodsStatus'
        shopName: this.form.shopName || '',
        startTime:this.formatDate(this.form.timeStartAndEnd[0]),
        endTime: this.formatDate(this.form.timeStartAndEnd[1]),
      });
      const url = `${baseUrl}?${queryParams.toString()}`;
      this.axios.get(url)
          .then(res => {
        if (res.data) {
          this.tableData = res.data;
          console.log("开始时间：", this.form.timeStartAndEnd[0]);
          console.log("结束时间：", this.form.timeStartAndEnd[1]);
          console.log("获取网页所有数据成功:", JSON.stringify(this.tableData));
        } else {
          console.error("响应数据格式不正确或未找到数据");
        }
      })
          .catch(error => {
            console.error("获取数据失败:", error);
          });
    },
    // 初始化数据
    initData() {
      this.axios.get('http://localhost:8080/panghudaojiaBackend/goods/querySearchShopGoodsList')
      // this.axios.get('http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList?pageNum=1&pageSize=10&goodsName=&goodsStatus=&shopName=&startTime=&endTime=')
          .then((res) => {
            this.tableData = res.data;
            // console.log("输出tableDat中的数据" + JSON.stringify(this.tableData))
          }).catch((err) => {
            console.log("如果请求失败，才会执行catch");
          }
      )
    },
  //   字符串转为Date对象
     formatDate(dateStr) {
          // 首先，将字符串转换为Date对象
       if (dateStr === null || dateStr ===undefined){
         return null;
       }
          const date = new Date(dateStr);
          // 然后，使用Date对象的方法来获取年、月、日、时、分、秒
          // 注意月份需要+1，因为Date对象的月份是从0开始的
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');
          // 最后，将这些部分组合成新的字符串
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
//     查询上架中的商品
    getOnSaleGoods() {
      // this.axios.get('http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList',
      this.axios.get('http://localhost:8080/panghudaojiaBackend/goods/querySearchShopGoodsList',
          {
            params:{
              goodsStatus: '1',
              pageNum: 1,
              pageSize: 10,
              goodsName: '',
              shopName: '',
              startTime: '',
              endTime: '',
            }
          }
      ).then((res) => {
            this.tableData = res.data;
            console.log("输出上架状态的商品"+ JSON.stringify(this.tableData))
          })
    },
//     查询下架中的商品
    getOffSaleGoods(){
      // this.axios.get('http://43.143.190.87:8091/panghudaojiaBackend/goods/querySearchShopGoodsList',
      this.axios.get('http://localhost:8080/panghudaojiaBackend/goods/querySearchShopGoodsList',
          {
            params:{
              goodsStatus: '0',
              pageNum: 1,
              pageSize: 10,
              goodsName: '',
              shopName: '',
              startTime: '',
              endTime: '',
            }
          }
      ).then((res) => {
        this.tableData = res.data;
        console.log("输出上架状态的商品"+ JSON.stringify(this.tableData))
      })
    },

    /*      // 准备要发送的参数
      let handledown = {
        goodsId: this.row.goodsId,
        goodsStatus: this.row.goodsStatus === 0 ? 1 : 0,
      };*/
      //上下架
    handleClick(row) {
      this.row = row;
      console.log(typeof(row.goodsId));
      console.log(typeof(this.row.goodsStatus));

      // 发送POST请求
      this.axios.post("http://localhost:8080/panghudaojiaBackend/goods/modifyShopGoodsServlet", {
        goodsId: this.row.goodsId,
        goodsStatus: this.row.goodsStatus,
      })
          .then((res) => {
            console.log(res);
            console.log(this.row.goodsId);
            console.log(this.row.goodsStatus);
            this.initData();
          })
          .catch(err => {
            console.error('Request failed:', err);
            if (err.response) {
              console.error('Response data:', err.response.data);
              console.error('Status code:', err.response.status);
            }
          });
    },
//     监听当当前页面页数
    handleCurrentChange(newPage) {
      this.form.pageNum = newPage; // 更新当前页码
      console.log("当前页码为:" +  this.form.pageNum)
      this.fetchData(); // 调用数据获取函数

    },
//    当前页码改变时触发
    fetchData(){
        this.axios.get('http://localhost:8080/panghudaojiaBackend/goods/querySearchShopGoodsList',
        // this.axios.get('goods/querySearchShopGoodsList',
            {
              params:{
                pageNum: this.form.pageNum,
                pageSize: 10,
                goodsName: '',
                goodsStatus: '',
                shopName: '',
                startTime:'',
                endTime:'',
              }
            }).then(res => {
          this.tableData = res.data;
          console.log("查询分页后的数据", this.tableData);
        }).catch(error => {
          console.error('获取数据失败:', error);
        });
    }
    },
    watch:{
  //   监听搜索框中数据变化
    radio1(newVal) {
      if (newVal === '全部商品') {
        // 假设 initData() 是用来加载全部商品数据的
        this.initData();
      } else if (newVal === '上架中') {
        // 当选择“上架中”时，调用 getOnSaleGoods()
        this.getOnSaleGoods();
      } else if (newVal === '已下架') {
        // 如果需要处理“已下架”的逻辑，可以在这里添加
       this.getOffSaleGoods();
      }
    }
  }
}
</script>

<template>
  <div class="container">
      <div class="goods-content">
          <!--上方状态栏-->
          <div class="form-container">
              <el-form ref="searchForm" :model="form" label-width="80px" class="searchForm cf">
                  <el-row :gutter="20">
                      <el-col :span="8">
                          <el-form-item label="状态">
                              <el-radio-group v-model="radio1">
                                  <el-radio-button label="全部商品"></el-radio-button>
                                  <el-radio-button label="上架中"></el-radio-button>
                                  <el-radio-button label="已下架"></el-radio-button>
                              </el-radio-group>
                          </el-form-item>
                      </el-col>
                      <el-col :span="16">
                          <div class="inline-form-items">
                              <el-form-item label="商品名称" class="inline-item" style="width: 48%;">
                                  <el-input
                                      suffix-icon="el-icon-date"
                                      v-model="form.goodsName"
                                      class="input-field inline-input"
                                  ></el-input>
                              </el-form-item>
                              <el-form-item label="所属门店" class="inline-item" style="width: 48%;">
                                  <el-input
                                      prefix-icon="el-icon-search"
                                      v-model="form.shopName"
                                      class="input-field inline-input"
                                  ></el-input>
                              </el-form-item>
                          </div>
                      </el-col>
                  </el-row>
                  <el-form-item label="发布日期" class="search">
                      <el-date-picker
                          v-model="form.timeStartAndEnd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          align="right"
                          class="date-picker"
                      ></el-date-picker>
                  </el-form-item>
                  <el-form-item class="search">
                      <el-button type="primary" @click="getSearch">搜索</el-button>
                  </el-form-item>
              </el-form>
          </div>
          <!--  下方填充表格  -->
          <div class="upContent">
              <el-table
                  :data="tableData"
                  border
                  :header-cell-style="{'text-align': 'center',backgroundColor: '#1890ff',color:'#fff'}"
                  :cell-style="{'text-align': 'center'}"
                  style="width: 100%">
                  <el-table-column
                      prop="goodsId"
                      label="商品ID">
                  </el-table-column>
                  <el-table-column
                      prop="goodsName"
                      label="商品">
                  </el-table-column>
                  <el-table-column
                      prop="goodsShopName"
                      label="所属门店">
                  </el-table-column>
                  <el-table-column
                      prop="goodsSalesVolume"
                      label="销量">
                  </el-table-column>
                  <el-table-column
                      prop="goodsPresentPrice"
                      label="预估价">
                  </el-table-column>
                  <el-table-column
                      prop="addTime"
                      label="发布时间">
                  </el-table-column>
                  <el-table-column
                      prop="goodsStatus"
                      label="状态">
                      <template slot-scope="scope">
                          <!-- 根据 goodsStatus 的值显示不同的文本 -->
                          <span>{{ scope.row.goodsStatus === 1 ? '上架' : '下架' }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column
                      fixed="right"
                      label="操作">
                      <template v-slot="scope">
                          <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.goodsStatus === 1 ? '去下架' : '去上架'}}</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <!--  分页按钮  -->
          <div class="block">
              <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page.sync="form.pageNum"
                  :page-size="10"
                  layout="prev, pager, next"
                  :total="1000">
              </el-pagination>
          </div>
      </div>
  </div>
</template>

<style scoped>
/* 可能需要一些CSS来调整布局或样式，但在这个例子中，主要使用了el-row和el-col的样式 */
.inline-form-items {
  display: flex; /* 实际上在这个例子中可能不需要，因为el-col已经处理了列的布局 */
  align-items: center; /* 如果需要垂直居中，可以保留 */
}
.inline-item {
  /* 这里的样式可能需要根据实际情况进行调整，但在这个例子中，我们使用了el-col的span属性来控制宽度 */
}
.input-field {
  /* 如果需要，可以添加一些自定义的输入框样式 */
  width: 100%; /* 在这个例子中，由于我们使用了flex布局和el-col的span属性，这个width设置可能不是必需的 */
}
.goods-content{
    padding: 20px;
}
.search{
    float: left;
}
</style>